

import React, { useState,forwardRef, useImperativeHandle } from 'react';
import Close from '../../assets/close-cfc84986.svg'
const Dialog = forwardRef((props, ref) => {

  const [showDialog,setShowDialog] = useState(false)
  
  useImperativeHandle(ref, (props) => ({
    setShowDialog
  }));

  return (
  <div key={'dialog'} style={{display:showDialog?'block':'none'}}>
    <div className="relative z-50" id="headlessui-dialog-:rdd:" role="dialog" aria-modal="true" data-headlessui-state="open"
      aria-labelledby="headlessui-dialog-title-:rdf:">
      <div className="fixed inset-0 bg-black/30" aria-hidden="true"></div>
      <div className="fixed inset-0 flex items-center justify-center max-h-screen m-5">
        <div className="mx-auto rounded-3xl bg-primary-background shadow-2xl max-h-full overflow-hidden flex flex-col w-[500px] rounded-xl"
          id="headlessui-dialog-panel-:rde:" data-headlessui-state="open">
          <h2 className="border-b border-solid border-primary-border flex flex-row justify-center items-center py-4 px-5"
            id="headlessui-dialog-title-:rdf:" data-headlessui-state="open"><span className="ml-auto"></span><span
              className="font-bold text-primary-text text-base">🔒 会员功能</span><img src={Close} onClick={()=>{
                setShowDialog(false)
              }}
              className="w-4 h-4 ml-auto mr-[10px] cursor-pointer"/></h2>
          <div className="flex flex-col items-center gap-4 py-5">
            <p className="font-semibold text-primary-text text-center w-[70%]">升级会员，同时和两个以上的机器人聊天</p><a
              href="#/premium?source=all-in-one-modal" className="focus-visible:outline-none"><button type="button"
                className="rounded-full text-base font-medium px-6 py-[5px] text-white bg-primary-blue">
                <div className="flex flex-row items-center gap-1 min-w-max"><span>升级</span></div>
              </button></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  )
})

export default Dialog